<template>
  <div class="dashboard-editor-container">
    <el-card>
      <el-row>
        <el-col :span="12">
          <h2>人力预测相关的统一参数</h2>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table
            :data="tableData"
            class="tableMarginTop"
            border
            highlight-current-row
            ref="tableData"
          >
            <el-table-column
              prop="TIMEINTERVAL"
              label="分段间隔"
              align="center"
              :formatter="dataFormat"
            ></el-table-column>
            <el-table-column
              prop="MAXWAITTIME"
              label="最长等待时长"
              align="center"
              :formatter="dataFormat"
            ></el-table-column>
            <el-table-column
              prop="SHAREOFWORK"
              label="工时占有率"
              align="center"
              :formatter="dataFormat"
            ></el-table-column>
            <el-table-column label="操作" align="center" fixed="right">
              <template slot-scope="scope">
                <div>
                  <el-button type="danger" size="mini" @click="update(scope.row)">修改</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
    <component :is="dialogList.editDialog" :option="editOptions" @refreshTable="forecastQuery"></component>
  </div>
</template>

<script>
import toolBox from "@/common/utils/toolBox";
import getGlobalParams from "@/common/utils/getGlobalParams";
import request from "@/common/utils/requestWFM";
import query from "@/message/wfm/FTEForecast/forecastParam/forecastQuery";
import upadte from "@/message/wfm/FTEForecast/forecastParam/forecastUpdate";
import editDialog from "./dialog/editDialog";

export default {
  mounted() {
    this.forecastQuery();
  },
  data() {
    return {
      tableData: [],
      dialogList: {
        editDialog
      },
      editOptions: {
        isShow: false,
        title: "",
        row: {}
      }
    };
  },
  methods: {
    async forecastQuery() {
      let resBody = new query();
      let response = await request(resBody);
      if (response.SYS_HEAD.ReturnCode == "000000") {
        this.tableData = response.BODY.RSPSTRUCT;
      } else {
        this.$message({
          type: "error",
          message:
            "请求失败，错误码:" +
            response.SYS_HEAD.ReturnCode +
            "，错误信息：" +
            response.SYS_HEAD.ReturnMessage
        });
      }
    },
    async update(row) {
      this.editOptions.isShow = true;
      this.editOptions.title = "修改人力预测相关参数";
      this.editOptions.row = row;
    },
    dataFormat(row, column) {
      if (column.property == "TIMEINTERVAL")
        return row[column.property] + "分钟";
      if (column.property == "MAXWAITTIME")
        return row[column.property] + "分钟";
      if (column.property == "SHAREOFWORK" && row[column.property].indexOf('%') == -1){
          return row[column.property] + "%";
      }else{
          return row[column.property];
      }
        
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>